<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则   查找函数</title>
<link rel="stylesheet" href="css/base.css" />
<style>
	.reg-main{margin-left: 100px;}
	.regbox{margin-bottom: 25px;}
	.regbox .r-title{width: 90px; float: left; display: block; line-height: 38px;}
	.regbox .reg-inp{width:290px; height: 26px; padding: 5px 10px; float: left; display: block; border-radius: 5px; border: 1px solid #b1b1b1; margin-right: 5px;}
	.reg-btnwrap{margin-left: 90px;}
	.regerror{margin-top: 40px; margin-left: 90px; color: red;}
	
	
</style>
</head>
<body>
<div class="wrap">
	<h2 class="wrap-h2">正则表达式</h2>
	<div class="wrap-main">
		<div class="reg-main">
			
			<div class="regbox clearfix">
				<label class="r-title">用户名：</label>
				<input type="text" class="reg-inp" id="name1" placeholder="请输入4-18位英文和数字组合的用户名" maxlength="18">
			</div>
			<div class="regbox clearfix">
				<label class="r-title">密码：</label>
				<input type="text" class="reg-inp" id="password" placeholder="请输入6-18位密码" maxlength="18">
			</div>
			<div class="regbox clearfix">
				<label class="r-title">手机号码：</label>
				<input type="text" class="reg-inp" id="telphone" placeholder="请输入11位手机号码" maxlength="11">
			</div>
			<div class="regbox clearfix">
				<label class="r-title">手机验证码：</label>
				<input type="text" class="reg-inp" id="phonecode" placeholder="请输入6位手机验证码" maxlength="6">
			</div>
			<div class="regbox clearfix">
				<label class="r-title">图形验证码：</label>
				<input type="text" class="reg-inp" id="imgcode" placeholder="请输入4位图形验证码" maxlength="4">
			</div>
			<div class="regbox clearfix">
				<label class="r-title">真实姓名：</label>
				<input type="text" class="reg-inp" id="realname" placeholder="请输入2-4位中文">
			</div>
			<div class="regbox clearfix">
				<label class="r-title">身份证号：</label>
				<input type="text" class="reg-inp" id="cardid" placeholder="请输入15-18位数字或者最后一位是X(x)" maxlength="18">
			</div>
			<div class="regbox clearfix">
				<label class="r-title">微信号：</label>
				<input type="text" class="reg-inp" id="wechat" placeholder="请输入微信号码,英文，数字，英文+数字">
			</div>
			<div class="regbox clearfix">
				<label class="r-title">QQ号码：</label>
				<input type="text" class="reg-inp" id="qq" placeholder="请输入qq号码，只许数字" maxlength="15">
			</div>
			<div class="regbox clearfix">
				<label class="r-title">电子邮箱：</label>
				<input type="text" class="reg-inp" id="email" placeholder="请输入电子邮箱">
			</div>
			
			<div class="reg-btnwrap">
				<input type="button" id="regbtn" value="匹配">
			</div>
			<p class="regerror" id="errortips"></p>
		</div>
		
		
		
	</div>
</div>
<script>
	window.onload = function ()
	{
		
		var oBtn = document.getElementById("regbtn");
		
		oBtn.onclick = function()
		{
			var oName1 		= document.getElementById("name1").value;
			var oPsw 		= document.getElementById("password").value;
			var oTel 		= document.getElementById("telphone").value;
			var oPhonecode 	= document.getElementById("phonecode").value;
			var oImgcode 	= document.getElementById("imgcode").value;
			var oRealname 	= document.getElementById("realname").value;
			var oCardId 	= document.getElementById("cardid").value;
			var oWechat 	= document.getElementById("wechat").value;
			var oQQ 		= document.getElementById("qq").value;
			var oEmail 		= document.getElementById("email").value;
			var oTips 		= document.getElementById("errortips");
			
			
			var regname		= /^[a-zA-Z][a-zA-Z0-9_]{3,17}$/;									//字母开头，4-18位以上，英文数字下划线的组合
			var regpwd		= /^[\w]{6,18}$/;													//6-18位任意字符
			var regtel		= /^1([345][0-9]|4[579]|66|7[135678]|9[89])[0-9]{8}$/;				//手机号码11位数字
			var regphonecode= /^[a-zA-Z0-9]{6}$/												//6位数手机验证码
			var regimgcode	= /^[a-zA-Z0-9]{4}$/												//4位数图形验证码
			var regrealname	= /^[\u4e00-\u9fa5]{2,4}$/;											//2-4位中文
			var regid		= /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;	//15位和18位身份证号码
			var regwechat	= /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/;									//微信账号仅支持6-20个字母、数字、下划线或减号，以字母开头
			var regqq		= /^[1-9][0-9]{3,14}$/;												//4位以上的qq号码
			var regemail	= /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2,4})?)$/g;	//电子邮箱
			
			if( !regname.test(oName1) )
			{
				oTips.innerHTML = "用户名请输入 4-18位以上的英文数字组合";
				return;
			}
			
			if( !regpwd.test(oPsw) )
			{
				oTips.innerHTML = "密码请输入 6-18位任意字符";
				return;
			}
			
			if( !regtel.test(oTel) )
			{
				oTips.innerHTML = "手机号格式不正确！";
				return;
			}
			
			if( !regphonecode.test(oPhonecode) )
			{
				oTips.innerHTML = "手机验证码不合法！";
				return;
			}
			
			if( !regimgcode.test(oImgcode) )
			{
				oTips.innerHTML = "图形验证码不合法！";
				return;
			}
			
			if( !regrealname.test(oRealname) )
			{
				oTips.innerHTML = "真实姓名请输入2-4位中文！";
				return;
			}
			
			if( !regid.test(oCardId) )
			{
				oTips.innerHTML = "身份证号码不合法！";
				return;
			}
			
			if( !regwechat.test(oWechat) )
			{
				oTips.innerHTML = "微信号不合法！";
				return;
			}
			
			if( !regqq.test(oQQ) )
			{
				oTips.innerHTML = "QQ号不合法！";
				return;
			}
			
			if( !regemail.test(oEmail) )
			{
				oTips.innerHTML = "电子邮件不合法！";
				return;
			}
			
		}
		
		
		
	}
</script>
</body>
</html>
